<template>
	<view class="app-container">
		<view class="container-top">
			<img src="@/assets/img/wang.jpg" />
			<view class="info">
				<text class="title">歌手： 王楚钦</text>
				<text class="sub-title">左手横板弧圈结合快攻打法</text>
				<view class="btn-view">
					<u-button @click="goBack" size="medium" class="back" shape="circle" type="primary">
						<u-icon  name="arrow-left" color="#fff" size="28" style="margin-right: 6px">
						</u-icon>
						返回上页
					</u-button>
					<u-button size="medium" shape="circle" type="primary">
						<u-icon name="play-right" color="#fff" size="28" style="margin-right: 6px"></u-icon>
						播放全部
					</u-button>
				</view>
			</view>
		</view>
		<u-tabs :list="list"></u-tabs>
		<u-row gutter="50" class="list-title">
			<u-col span="5">
				<text>歌曲</text>
			</u-col>
			<u-col span="3">
				<text>歌手</text>
			</u-col>
			<u-col span="2">
				<text>专辑</text>
			</u-col>
			<u-col span="2">
				<text>时长</text>
			</u-col>
		</u-row>
		<view class="list-container">
			<u-row gutter="50" v-for="item in 20" :key="item" class="item-row">
				<u-col span="5">
					<view class="song-info">
						<u-icon name="heart" class="heart" size="30"></u-icon>
						<text class="title">{{ song[item % 10] }}</text>
						<text class="level"> VIP</text>
						<text class="level voice-level">
							全景声
						</text>
					</view>
				</u-col>
				<u-col span="3">
					<text>薛之谦</text>
				</u-col>
				<u-col span="2">
					<text>纵横四海</text>
				</u-col>
				<u-col span="2">
					<text>03:20:56</text>
				</u-col>
			</u-row>
		</view>
		<view class="playControl">
			<PlayControl />
		</view>
	</view>
</template>

<script>
	import PlayControl from './components/playControler'
	export default {
		components: {
			PlayControl
		},
		data() {
			return {
				type: '',
				list: [{
					name: '歌曲'
				}],
				current: '歌曲',
				song: [
					'可不可以喜欢我一下', '最炫民族风', '认错', '玫瑰花的葬礼', '爱上你是我的错', '清明雨上', '绅士', '可不可以喜欢我一下', '可惜没如果', '小酒窝', '青花瓷'
				]
			}
		},
		mounted() {
			this.type = this.$route.query.type
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-top {
		display: flex;
		margin-bottom: 20px;

		img {
			width: 110px;
			height: 110px;
			border-radius: 10px;
			margin-right: 20px;
		}

		.info {
			flex: 1;

			.title {
				font-size: 28px;
				font-weight: bold;
			}

			.sub-title {
				display: block;
				font-size: 14px;
				color: #999;
				line-height: 40px;
			}

			.btn-view {
				display: flex;

				.u-btn {
					display: block;
					width: 110px;
					margin: 0;
					padding: 0;
					margin-right: 20px;
					// &.back{
					// 	width: 90px;
					// }
				}
			}
		}
	}

	.list-title {
		margin-top: 20px;

		text {
			font-size: 14px;
			color: #999;
			font-weight: bold;
		}
	}

	.list-container {
		height: calc(100vh - 300px);
		padding-bottom: 20px;
		overflow-y: scroll;

		.item-row {
			height: 46px;
			cursor: pointer;
			line-height: 46px;
			border-bottom: 1px dashed #efefef;
		}
	}
</style>
